<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>调用麦克风和摄像头录制视频</title>
  
</head>

<body>
  <!-- 
    和录屏不同这个是调用本地的摄像头和麦克风，录屏是getDisplayMedia,对比看一下
   -->
  <video id="audio" width="400" height="600" controls autoplay></video>
  <input onclick="start()" type="button" value="开始" />
  <input onclick="stop()" type="button" value="结束" />
</body>
<script>
  let recorder
  function start() {
    let videoTarget = document.getElementById('audio');
    navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
      .then((stream) => {
        // recorder = new MediaRecorder(stream);
      
        videoTarget.srcObject = stream; // src 播放文件，而srcObject 属性播放流，有的浏览器也不区分
        // videoTarget = (...arg) => {
        //   console.log(arg);
        // }
        recorder.ondataavailable = (event) => {
          let url = URL.createObjectURL(event.data);
          let link = document.createElement("a");
          link.target = "_blank";
          link.href = url;
          link.click();

        }
        recorder.start();
      });
  }

  function stop() {
    recorder.stop();
  }
</script>
</html>